iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0
IoT

IoT 大亂鬥系列 第 24

LinearLayout - 版面權重

  • 分享至 

  • xImage
  •  

嗨,那今天要來處理區塊的問題。
一般再做配置,一個版面要分區塊時,你可能會用相對的方式來做切割。

先看看下面的程式碼。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Fish"
        android:background="#00E1FF"
        />
</LinearLayout>

在高度的地方寫上了0dp,是為了下面weight的地方,寫1的意思是指權重的部分。
那下面為了更明顯的區分,我加入了背景把它顯現出來,給小魚配上了藍色,那顏色的部分可以上網估狗就有,那這邊附上我自己使用的,而Android Studio他也很貼心的在前面都會顯示出顏色。
執行後會看到下面那樣。
https://ithelp.ithome.com.tw/upload/images/20201009/20129280BO8FE4treO.jpg
那在加入第二個,權重也配1,會看到兩個平分了版面

 <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="fur seal"
        android:background="#FFAE00"
        />

https://ithelp.ithome.com.tw/upload/images/20201009/201292807pK2nYkvmt.jpg
那在加入第三個並且將權重改為1 2 3看看。

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Fish"
        android:background="#00E1FF"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:text="fur seal"
        android:background="#FFAE00"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:text="Polar bear"
        android:background="#00FFB3"
        />

</LinearLayout>

https://ithelp.ithome.com.tw/upload/images/20201009/20129280uFF7sxdrcg.jpg
會發現三個區塊依比例分配了版面。


上一篇
LinearLayout - 3
下一篇
RelativeLayout - 1
系列文
IoT 大亂鬥29
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言